<template lang="html">
 <div class="page-scroll-view">
   <ui-header>套餐列表</ui-header>
   <div>
     <!-- <div> -->
       <!-- <meal-item :list="records"></meal-item> -->
       <!-- <div v-for="(item, index) in items" @click="onItemClick(index, item)"
           class="row" :class="{'grey-bg': index % 2 == 0}">
         {{ item }}
       </div> -->
     <!-- </div> -->
     <scroller style="top:1.25699rem;"
              :on-refresh="refresh"
              :on-infinite="infinite"
              ref="my_scroller">
      <div class="mt-meal-item" v-for="(item, index) in items" :key="item.id">
        <div data-flex="main-between" class="mb15 f30">
          <h3 class="n">{{item.name}}</h3>
          <p class="c-rd f32">￥{{item.price | formatPrice}}</p>
        </div>
        <div>
          <div class="icon-gender" :class="item.gender ? 'woman':'man'">
            <i class="iconfont l">{{item.gender ? '&#xe65a;':'&#xe659;'}}</i>
            <span class="gender-txt">{{item.gender ? '女':'男'}}</span>
          </div>
        </div>
      </div>
    </scroller>

   </div>
 </div>
</template>

<script>
import mealItem from './p-meal-list-item'
import Scroller from 'vue-scroller'

export default {
  data () {
    return {
      items: [],
      records: [
        {name: '健康全面型套餐 女2', id: 11833, price: 325800, displayPrice: 325800, gender: 1, disable: 0},
        {name: '健康全面型套餐 男 2', id: 12844, price: 461400, displayPrice: 461400, gender: 0, disable: 0},
        {name: '健康豪华型套餐 女 1', id: 11863, price: 335400, displayPrice: 335400, gender: 1, disable: 0},
      ]
    }
  },
  components: {
    mealItem,
    Scroller,
  },
  mounted () {
    for (let i = 1; i <= 20; i++) {
      // this.items.push(i + ' - keep walking, be 2 with you.')
      this.items.push({
        name: i + '健康全面型套餐',
        id: 1000 + ~~(Math.random() * 100) + (~~Math.random() * 20) + i,
        price: 320000 + ~~(Math.random() * 100),
        gender: (Math.random() - 0.5) > 0 ? 1 : 0,
      })
    }
    this.top = 1
    this.bottom = 20

    setTimeout(() => {
      this.$refs.my_scroller.resize()
    })
  },
  methods: {
    refresh () {
      setTimeout(() => {
        let start = this.top - 1

        for (let i = start; i > start - 10; i--) {
          this.items.splice(0, 0, {
            name: i + '健康全面型套餐',
            id: 1000 + ~~(Math.random() * 100) + (~~Math.random() * 20) + i,
            price: 320000 + ~~(Math.random() * 100),
            gender: (Math.random() - 0.5) > 0 ? 1 : 0,
          })
        }

        this.top = this.top - 10

        if (this.$refs.my_scroller) {
          this.$refs.my_scroller.finishPullToRefresh()
        }
      }, 1500)
    },
    infinite () {
      setTimeout(() => {
        let start = this.bottom + 1

        for (let i = start; i < start + 10; i++) {
          this.items.push({
            name: i + '健康全面型套餐',
            id: 1000 + ~~(Math.random() * 100) + (~~Math.random() * 20) + i,
            price: 320000 + ~~(Math.random() * 100),
            gender: (Math.random() - 0.5) > 0 ? 1 : 0,
          })
        }

        this.bottom = this.bottom + 10

        setTimeout(() => {
          if (this.$refs.my_scroller) {
            this.$refs.my_scroller.finishInfinite()
          }
        })
      }, 1500)
    },
    onItemClick (index, item) {
      console.log(index)
    }
  }
}
</script>

<style lang="less">
.row {
  display: block;
  width: 100%;
  height: 50px;
  padding: 10px 0 10px 15px;
  font-size: 16px;
  line-height: 30px;
  color: #444;
  background-color: #fff;
}

.grey-bg {
  background-color: #eee;
}

.arrow-right {
  width: 8px;
  height: 16px;
  float: right;
  margin-top: 7px;
  margin-right: 15px;
}

// github corner
.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}


.mt-meal-item{
  padding: 20px 30px;
  border-bottom: 1Px solid #ddd;
  background: #fff;
  .icon-gender {
    padding: 1Px;
    border-radius: 2Px;
    width: 80px;
    .iconfont{
      font-size: 30px;
      background: #fff;
      width: 39px;
      text-align: center;
    }
    .gender-txt{
      color:#fff;
    }
    &.man{
      color:#87d9f7;
      border-color:#87d9f7;
      background-color: #87d9f7;
    }
    &.woman{
      color:#edb8d7;
      border-color:#edb8d7;
      background-color: #edb8d7;
    }
  }
}

</style>
